<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
    组件的定义（创建）
      创建一个包含有特定选项（template、render、props、data、methods、computed、watch、生命周期钩子函数等等）的一个对象即可。

      PS: 大部分选项都是可选的，但 template or render 必须

    注册组件
      1. 全局注册
        Vue2
          Vue.component(组件的名字, 组件对象)
          PS: 写在 new Vue 之前
        Vue3
          app.component(组件的名字, 组件对象)
          PS: 写在 createApp 之后, mount 之前
      2. 局部注册
        设置 components 选项

        const A组件 = {
          components: {
            组件的名字: 组件对象,
          }
        }

    使用组件
      将组件的名字，当成自定义的标签使用在模板中即可。


   -->

    <div id="app">
      <h1>App</h1>

      <!-- 
        使用组件，
          PS：这里使用时，需要将组件名转换成短横线语法，这是 html 的限制
       -->
      <my-header></my-header>

      <my-header></my-header>

      <my-header></my-header>
    </div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";
      // 定义一个 MyHeader 组件
      const MyHeader = {
        template: `
          <div>
            <h2>MyHeader</h2>  
          </div>
        `,
      };

      // 注册组件
      Vue.component("MyHeader", MyHeader);

      // 创建根组件实例
      const vm = new Vue({});

      // 挂载
      vm.$mount("#app");
    </script>

    <!-- <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      // 创建应用实例
      const app = createApp({});

      // 定义一个 MyHeader 组件
      const MyHeader = {
        template: `
          <div>
            <h2>MyHeader</h2>  
          </div>
        `,
      };

      // 注册 MyHeader 组件
      app.component("MyHeader", MyHeader);

      // 挂载应用
      app.mount("#app");
    </script> -->
  </body>
</html>
